<template>
    <div class="my">
    	<!--头部-->
      <div class="my-top">
      	<div class="my-top-box">
      		<div class="my-top-xinxi">
      			<div class="tx">	
      				<router-link to="/information"><img :src="img1" alt="" class="tp"/></router-link>
      				<img src="https://wap.365msmk.com/img/皇冠-2 拷贝@2x.ca9087bc.png" alt="" class="hg"/>
      			</div>
      			<div class="xm">
      				<span class="mz">{{zjb_my_nickname}}</span>
      				<span class="bj"></span>
      			</div>
      		</div>
      		<div class="my-top-kc">
      			<ul>
      				<li>
      					<p class="shu">0</p>
      					<p class="ke">我的特色课</p>
      					<p class="gou">已购特色课程的学习</p>
      				</li>
      				<li>
      					<p class="shu">0</p>
      					<p class="ke">一对一辅导</p>
      					<p class="gou">我的一对一老师</p>
      				</li>
      				<li>
      					<p class="shu">0.00</p>
      					<p class="ke">剩余学习币</p>
      					<p class="gou">查看剩余学习币</p>
      				</li>
      			</ul>
      		</div>
      		<div class="my-top-yk" @click="yuk">
      			<span>去约课</span>
      		</div>
      	</div>
      </div>

    <div class="cao">
		    	<!--中间导航--> 
    <div class="my-dh">
     	<img class="yq-tu" src="" alt="" />
     	<div class="yq">
     		<p class="yqa">邀请好友注册APP，享多重好礼</p>
     		<p class="yqb">限时特惠，多邀多得</p>
     	</div>
     </div>
  	<!--ul li嵌套-->
  	<ul class="zhu">
  		<li class="zhu-fl">
  			<p class="title">课程相关</p>
  			<ul class="ci">
  			<router-link to="/attention"><li class="tw">
  					<img src="" alt="" />
  					<p>关注的老师</p>
  				</li>
  			</router-link>
  				<router-link to="/collection"><li class="tw">
  					<img src="" alt="" />
  					<p>我的收藏</p>
  				</li>
  				</router-link>
  			</ul>
  		</li>
  		<li class="zhu-fl">
  			<p class="title">订单相关</p>
  			<ul class="ci">
  				<li class="tw">
  					<img src="" alt="" />
  					<p @click="ke">课程订单</p>
  				</li>
  				<li class="tw">
  					<img src="" alt="" />
  					<p>会员订单</p>
  				</li>
  				<li class="tw">
  					<img src="" alt="" />
  					<p>约课订单</p>
  				</li>
  			</ul>
  		</li>
  		<li class="zhu-fl">
  			<p class="title">课程相关</p>
  			<ul class="ci">
  				<li class="tw">
  					<img src="" alt="" />
  					<p>优惠券</p>
  				</li>
  				<li class="tw">
  					<img src="" alt="" />
  					<p>学习卡</p>
  				</li>
  				
  			</ul>
  		</li>
  		<li class="zhu-fl">
  			<p class="title">自助服务</p>
  			<ul class="ci">
  				<li class="tw">
  					<img src="" alt="" />
  					<p>关注的老师</p>
  				</li>
  				<li class="tw">
  					<img src="" alt="" />
  					<p>我的收藏</p>
  				</li>
  			</ul>
  			<ul class="ci">
  				<li class="tw">
  					<img src="" alt="" />
  					<p>关注的老师</p>
  				</li>
  				<li class="tw" @click="shezhi">
  					<img src="" alt="" />
  					<p>设置</p>
  				</li>
  			</ul>
  			
  		</li>
  	</ul>
	</div>
	<router-view></router-view>
    </div>
</template>

<script>
import http1 from '../../uti/http'
import {mapState} from 'vuex';
 export default {
        name: "My",
		data(){
			return{
				zjb_my_nickname:'',
				img1:''
			}
		},
		created(){
			var token=this.$store.state.User.token;//--->从仓库中读取token令牌
			// this.$http1.get('/api/app/userInfo?').then(res=>{
			// 	console.log(res);
			// 	this.zjb_my_nickname=res.nickname;//-->读取数据中的用户名
			// 	this.img1=res.avatar;
			// })
			this.axios.get("https://test.365msmk.com/api/app/userInfo?",{
				headers: { Authorization: "Bearer " + token }
			}).then((ret)=>{
				console.log(ret)
				// console.log('====================================');
				// console.log(ret.data.data.nickname);
				// console.log('====================================');
				this.zjb_my_nickname=ret.data.data.nickname;//-->读取数据中的用户名
				this.img1=ret.data.data.avatar;
			})
		},
        methods:{
			ke(){//--->点击课程订单，跳转页面
				this.$router.push('/ke');
			},
        	shezhi(){//-->点击设置
        		this.$router.push('/setup')
        	},
        	yuk(){
        		this.$router.push('/study')
        	}
        },
		

    }
</script>

<style scoped>
	.my{
		height: 100%;
		overflow: auto;
	}
	/*头部样式*/
.my-top{
	width:100%;
	height:4.2rem;
	background: url(https://wap.365msmk.com/img/user_bg.ab306a5c.png) no-repeat top;
	background-size: 100%;
    background-color: #fff;
    position: relative;
}
.my-top-box{
	width: 92%;
	height: 3.3rem;
	background-color: #fff;
	/*margin: 0 auto;*/
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	border-radius: 10px;
	box-shadow:0px 0px 1px #909090;
}
.my-top-xinxi{
	height: 1.1rem;
	margin-top:0.3rem;
	margin-left:0.3rem;
	display: flex;
    justify-content: flex-start;
    align-items: center;
    font-family:"Microsoft YaHei";
	font-size:0.3rem;	
}
.tx{
	height: 1.1rem;
	width: 1.1rem;
	border-radius:50%;
	background-color:#bdcdf1 ;
	position: relative;
	margin-right: 0.25rem;
	
}
.tx .tp{
	height: 1.05rem;
	width: 1.05rem;
	border-radius:50%;
	margin:0.025rem;
	
}
.tx .hg{
	height:0.4rem;
	width: 0.4rem;
	position: absolute;
	right: -0.23rem;
	top: 0;
}
.xm{
	    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 0.4rem;
}
.bj{
	width: 0.3rem;
	height:0.3rem;
	margin-left: 0.2rem;
	background:url()50% no-repeat;
	background-size: 0.3rem;
}
.my-top-kc{
	width: 100%;
	display: flex;
	height: 1.9rem;
}
.my-top-kc ul{
	list-style: none;
	width: 100%;
	
}
.my-top-kc ul li{
	width: 33%;
	height: 1.7rem;
	/*margin-top: 0.4rem;*/
	/*display: inline-block;*/
	line-height:0.5rem;
	float: left;
	margin: 0.25rem 0 0 0;
	text-align: center;
}
.my-top-kc ul li .shu{
	font-size: 0.5rem;
	color: #eb6100;
}
.my-top-kc ul li .ke{
	 font-size: 0.25rem;
    color: #595959;
}
.my-top-kc ul li .gou{
	font-size: 0.2rem;
    color: #b7b7b7;
    line-height: 0.1rem;
}
.my-top-yk{
	position: absolute;
	width: 1rem;
	height: 0.5rem;
	top: 0.2rem;
	right: 0;
	border-top-left-radius: 0.25rem;
	border-bottom-left-radius: 0.25rem;
	background-color: #eb6100;
	text-align: center;
	line-height: 0.5rem;
	color: #fff;
	font-size: 0.2rem;
}
/*中间导航样式*/
.my-dh{
	width: 92%;
	margin: 0 auto;
	height: 0.9rem;
	border-radius: 0.5rem;
	background: linear-gradient(-90deg,#f2995a,#eb6100);
	align-items: center;
	display: flex;
}
.my-dh .yq-tu{
		width: 0.4rem;
		height: 0.4rem;
		margin: 0 0.3rem 0 0.4rem;
		display: block;
	}
.my-dh .yq{
	display: block;	
	font-family:"Microsoft YaHei"
}
.my-dh .yq .yqa{
	font-size: 0.23rem;
    color: #fff;
    line-height: 1.2;
}
.my-dh .yq .yqb{
	font-size: 0.2rem;
    color: #fff;
    line-height: 1.2;
}
.cao{
	background: #fff;
}
.zhu{
	width: 92%;
	margin: 0 auto;
	list-style: none;
}
.zhu .zhu-fl{
	width: 100%;
	padding:0.2rem 0;
		display: block;
    overflow: hidden;

}
.zhu .zhu-fl .title{
	    color: #333;
	    font-size: 0.27rem;
	    line-height: 0.25rem;
}
.zhu .zhu-f1 .ci{
	list-style: none;

	height: 1rem;
    
}
.zhu .zhu-fl .ci .tw{
	width: 25%;
	height: 1rem;
	align-items: center;
	text-align: center;
	justify-content: flex-end;
	flex-direction: column;
	display: flex;
	float: left;
}
.zhu .zhu-fl .ci .tw img{
	height: 0.4rem;
	width: 0.4rem;
}
.zhu .zhu-fl .ci .tw p{
	margin-top: 0.1rem;
	color: #666;
	font-size:0.2rem
}
</style>
